<template>
  <div class="ipInput" :class="{'border': focus}">
    <input ref="input1" v-model="i1" @input.prevent="changeInput(i1, 1)" @focus="setFocus" @blur="setBlur" @keyup.delete="changeInput(i1, 1, false)"/>
    <span>·</span>
    <input ref="input2" v-model="i2" @input.prevent="changeInput(i2, 2)" @focus="setFocus" @blur="setBlur" @keyup.delete="changeInput(i2, 2, false)"/>
    <span>·</span>
    <input ref="input3" v-model="i3" @input.prevent="changeInput(i3, 3)" @focus="setFocus" @blur="setBlur" @keyup.delete="changeInput(i3, 3, false)"/>
    <span>·</span>
    <input ref="input4" v-model="i4" @input.prevent="changeInput(i4, 4)" @focus="setFocus" @blur="setBlur" @keyup.delete="changeInput(i4, 4, false)"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Ref, Prop } from 'vue-property-decorator';
import { ipValidate } from '@/utils/validate'
/**
 * ip地址输入框
 *
 * @Prop ip
 * @emits out
 */
@Component({
  name: 'IpInput'
})
export default class IpInput extends Vue {
  @Prop() private ip: any
  @Ref() private readonly input1: any
  @Ref() private readonly input2: any
  @Ref() private readonly input3: any
  @Ref() private readonly input4: any
  private newValue: string = ''
  private i1: string = ''
  private i2: string = ''
  private i3: string = ''
  private i4: string = ''
  private focus: boolean = false
  private inter: any = null

  private mounted () {
    if (this.ip) {
      const ips = this.ip.split('.')
      this.i1 = ips[0]
      this.i2 = ips[1]
      this.i3 = ips[2]
      this.i4 = ips[3]
    }
  }

  // 监听输入内容，转数字，上限255，超过三位时自动进入下一输入框，删除时如果输入框全部被删除就进入前一输入框
  private changeInput (val, index, bool = true) {
    let newval: any = parseInt(val, 0)
    if (isNaN(newval)) {
      newval = ''
    }
    if (newval > 255) {
      newval = 255
    }
    this['i' + index] = newval
    if (String(newval).length > 2 && index < 4) {
      if (bool) {
        this['input' + (index + 1)].focus()
      }
    }
    if (newval === '' && index > 1) {
      this['input' + (index - 1)].focus()
    }
    this.$emit('update:ip', `${this.i1}.${this.i2}.${this.i3}.${this.i4}`)
  }

  // 外层框获取焦点
  private setFocus () {
    this.focus = true
    if (this.inter) {
      clearTimeout(this.inter)
    }
  }

  // 外层框失去焦点，会延迟检测输入内容格式是否正确
  private setBlur () {
    this.focus = false
    if (this.inter) {
      clearTimeout(this.inter)
    }
    this.inter = setTimeout(() => {
      if (ipValidate(`${this.i1}.${this.i2}.${this.i3}.${this.i4}`)) {
        this.$emit('out')
      }
    }, 1000)
  }
}
</script>

<style lang="stylus" scoped>
.ipInput
  -webkit-appearance: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #303753;
  display: inline-block;
  font-size: inherit;
  height: 32px;
  line-height: 12px;
  font-size: 12px
  outline: none;
  padding: 8px 7px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
  input
    -webkit-appearance: none;
    background-color: #FFFFFF;
    background-image: none;
    border-radius: 4px;
    border: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #303753;
    display: inline-block;
    font-size: inherit;
    outline: none;
    text-align: center
    width: 40px
.border
  border-color: $c-main
</style>
